<!-- 首页banner 左侧的分类 -->
<template>
<div class="home-category">

    <ul class="menu">
        <li v-for="item in wrapCategory" :key="item.id">
           <router-link :to="`/category/${item.id}`">{{item.name}}</router-link>
           <router-link :to="`/category/sub/${item.id}`" v-for="list in item.children" :key="list.id">
             <!-- 这里换行，ui会默认加个空格 -->
            {{list.name}}
        </router-link>
        </li>
    </ul>

</div>
</template>

<script>
import { mapGetters } from 'vuex';

export default{
    name:'home-category',
    computed:{
        ...mapGetters('category',['wrapCategory'])
    }
}
</script>

<style lang="less" scoped>
@import '@/assets/styles/variables.less';
.home-category{
    z-index: 500;
    background-color: rgba(0, 0, 0,0.8);
    color: antiquewhite;
    position: absolute;
    left: 0;
    top: 0;
    width: 250px;
    height: 100%;

    .menu{
        width: 100%;
        height: 100%;

        li{
            padding-left: 40px;
            height: 50px;
            line-height: 50px;

            a:first-child{
                font-size: 16px;
            }

            a{
                margin-right: 4px;
                color:#fff;
            }

            &:hover{
                background-color: @themeColor;
            }
        }
        
    }
}
</style>